<template>
  <div class="swiper">
    <div class="swiper-wrapper"><!--产生浮动-->
      <div class="swiper-slide" v-for="item in imageList" :key="item.id">
        <van-image :src="item.url" fit="contain" height="300px">
          <template v-slot:error>加载失败</template>
        </van-image>
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>
<script>
// @ is an alias to /src
// import ImageSwiper from "@/components/ImageSwiper.vue";
import { Swiper, Autoplay, EffectCube } from "swiper";
import "swiper/swiper.min.css";
import "swiper/swiper-bundle.min.css";
import "swiper/swiper-bundle.esm.js";
export default {
  name: 'HomeView',
  components: {
    ImageSwiper
  },
  data() {
    return {
      imageList: []
    };
  },
  mounted() {
    new Swiper(".swiper", {
      initialSlide: 0,
      direction: "horizontal",
      speed: 300,
      grabCursor: true,
      autoplay: {
        delay: 2000,
        disableOnInteraction: false
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      effect: 'cube',
      cubeEffect: {
        slideShadows: true,
        shadow: false,
        shadowOffset: 100,
        shadowScale: 0.6
      },

      modules: [Autoplay, EffectCube]
    });
  }
}
</script>
<style>
.swiper {
  --swiper-navigation-color: #c2c7c4;
  /*按钮颜色*/
  --swiper-navigation-size: 18px;
  /*按钮大小*/
}
</style>